RECAD 
Loops will execute a block of code multiple times ( ) 


What types of loops are there In 


JavasScript¢ For Loops 


While Loops ( y. For...of Loops 
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RECAD 


Write a while loop: 


Let number = @ 
while (number < 5) { 


/*do something*/ 
number++ 


Write a for loop: 


for (Let number = 1; number <= N; number++){ 
/*do something*/ 


RECAD 


Write a for...of loop 


Let message = "Hear ye!" 


for (const character of message) { 
console. log(character ) 


I 


Arrays 


HIE[L| Lofty 


Hello! 


Learning Objective 


Arrays, what are they? 


Looping through arrays 


Array length 
Push, pop, shift, unshift 
string to array, array to String 
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Party 


Let’s host a party! Ss 


Who shall we invitee We'll make a list: 


Spongebob 
Patrick 


tp Vv ww 
Then send each one an invite! 
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Javascript Party 


Well, remember how strings are , 
just a list of characters? — 


Maybe we can make a list of other things¢ 


Sentinel 


Arrays 


Lists in JavaScript are called “Arrays”: 


Everything in between — 
comma separated values 


Let partyPeople = ["Spongebob", "Patrick", "Sandy" | 


Specifies the start End of the Array 
of an Array 


Elements of the 


Looping over Arrays 


We can loop over arrays the same way we did for 
Strings. 


Let's send out the invites! 


for (const person of partyPeople) { 
(person) 
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More Values 


Arrays aren't limited fo just strings, any value can 
be an item in an array 


And they can be as small or as large as you want 
(almost) 


e 
as Me 


Let empty = [] 


Array Length 


We can use the length property fo check how [=] 
many items are in the Array: ee 


Let everythingArray = 
[1337,° Blue , NaN, 3.14)... 


everythingArray.length [1 o 


Let emptyArray = [] emptyArray.length (1 0 


= 


Problem Solving 


Ll 


How can we use an Array 
To calculate the average 
value of a list of numbers? 
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Calculating Average 


eX 


X = [2,6,3,9,6,...,2,5] 
Step 1. Sum up the elements: ¥X¥ =2+6+34+9+4+6+:-42+5 


yx 
X.length 


Step 2. Divide by the number of elements: X = 
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Solution 


const NUMBERS = [1337, 1, 3, 3, 7, 9] 


Let sum 
for (const number of NUMBERS) { 
sum += number 


I 
Let average = sum / NUMBERS. length 


Oh no... We forgot Plankton 


We can modify an Array after it’s been initialized 
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Array Methods 


Oush — append an item fo the end of the Array 


Let partyPeople = ["Spongebob" 


Append Here 


Array Methods 


oush — append an item fo the end of the Array 


Append Here 


Array Methods 


pop — remove and return the 


: artyPeople. 
last item seni ees 0 


Array Methods 


pop — remove and return the 


: artyPeople. 
last item sends reds 0 


shift — remove and return the 
first item 


partyPeople. 


Array Methods 


pop — remove and return the last 
item 


partyPeople. () 


shiff — remove and return the first item partyPeople. () 


unshift — insert an ite 
beginning 


Array Methods 


pop — remove and return the last item 
partyPeople. ©) 


shift — remove and return the first 


ee partyPeople. () 


unshift 7 insert an item to the partyPeople. 
beginning 


INdexing ey 


Like strings, arrays can be indexed! 6) 


Let partyPeople = ["Spongebob", "Patrick", "Sandy" | 
partyPeople[@] // Notice, Arrays are zero-indexed! 
partyPeople[ 1] 


But the values can also be changed: 


Indexing 


How would you access the last element of an Array? 


& partyPeople|[ partyPeople. length ] | 
@ partyPeople[partyPeople.length - 1] | 
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Indexing 


How would you access the last element of an Array? 


A: Because arrays are zero-indexed, the answer is 2! 
& partyPeople[partyPeople.length - 1] | 


OR partyPeople.at(-1) 


Variables in Arrays 


You might be wondering, what happens if we do this¢ 


Let a "Hello" 

Let b = "Arrays" 
Let myArray = ane b] 
myArray[1] = "World" 


console. (b) 


Variables in Arrays 


You might be wondering, what happens if we do this¢ 


Let a 3 ja |"Hello" lb |["Arrays" — 


Let b 


ec a f as 
A 
myArray[1] = | Geass Ll 


Variables in Arrays 


You might be wondering, what happens if we do this¢ 


let a "He ja _|"Hello” fb | “Arrays” _ 


Let b | ‘a 


Let sdoaltee sak = Las |] 
A 


The values are copied into the new array 


Variables in Arrays 


You might be wondering, what happens if we do this¢ 


let a = “Hello® ——— 
Let b = "Arrays" 


Let nyarray = = ac |] 
A 


So myArray[1] = "World" will not change b 


Variables in Arrays 


You might be wondering, what happens if we do this¢ 


let a = “Hello® ——— 
Let b = "Arrays" 


Let nyarray = = ac |] 
A 


SsomyArray[1] = "World" will not change b 


Problem Solving 2 
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Motivation 


In our code breaker app, we need To: 


2. Substitute the letters based on the key 


3. Convert the array back to a string 


Let’s see how we can perform these conversions 


String to Array 


Let myString = "SFNKYHOSU" 


Let myArray = Array.from(myString) 


// Now we can modify the Array 


Convert string into 
Array 


String to Array 


Let myString = "SFNKYHOSU" 


Let myArray = Array.from(myString) 


// Now we can modify /the Array 


We can also use myString.split() 
split also accepts a “separator” argument. E.g. 


Let myString = " tuce | ers. 
Let veggies = myString. Cry) 
// ["Lettuce", "Cucumbers", "Tomatoes" ] 


Let newString = myArray.join() 


console. log(newString ) 


3. Convert the array back to a string 


join also accepts a “separator” argument. E.g. 


partyPeople.join(", ") 
// "Spongebob, Patrick, Squidward, Plankton" 


Let’s do something useful 


Demo: Writing a simple Caesar Cipher Encryptor/Decryptor 


Some more methods 


reverse — reverse the order of the elements in the 
Array 
sort — sort the items in the Array 


slice — get a range of Ifems from the Array 
splice — insert/replace items in the Array 
indexOf — get the index of a value in the Array 


Feel free to read the documentation for these! 


Summary 


An Array is a list in JavaScript 


for (const person of partyPeople) { 
sendiInvite(person) 


Summary 


Arrays are zero indexed 


Let partyPeople = ["Spongebob", "Patrick", "Sandy" ] 


partyPeople[@] // Remember, Arrays are zero-indexed! 


And the values can be changed: 


Summary 


pop — remove and return the 


: artyPeople. 
last item seabed 0 


shift — remove and return the 


partyPeople. (2) 
first Item 


unshift — insert an item to 
the beginning 


i 
_ Sentine ; 
ii 
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partyPeople. 
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Questions? 


$ 
Sentinel 


Your Turn! 


> Play around, have 
fun, ask questions! 


